<template>
  <div class="all" style="padding-bottom: 200px">
    <!-- 顶部 -->
    <div class="header">
      <router-link :to="path.lujin"
        ><span><img src="img/return.png" alt="" /></span
      ></router-link>
      <span>商品详情</span>
      <hr style="width: 93%; margin: auto" />
    </div>
    <!-- 图片 -->
    <div class="pic">
      <img v-bind:src="buyNow.src" alt="" width="300px" height="298px" />
    </div>
    <!-- 价格介绍 -->
    <div class="pirce">
      <p>
        <span
          >￥<span>{{ buyNow.proPrice }}</span></span
        >
      </p>
      <p></p>
    </div>
    <!-- 活动 -->
    <div class="huodong">
      <p>
        活动:<span class="youhui">[最新优惠券]</span>
        <span class="lingqu">立即领取<i>></i></span>
      </p>
      <p>选择商品规格<i>></i></p>
    </div>
    <!-- 继续拖动 -->
    <div class="tuo">
      <p>————<span>继续拖动,查看商品详细信息</span>————</p>
    </div>
    <!-- 详情 -->
    <div class="xiang">
      <span>详情</span>
      <span>评论<i>(0)</i></span>
    </div>
    <div class="pic_1">
      <img v-bind:src="buyNow.src" alt="" width="300px" height="298px" />
    </div>
    <div class="tuo_1">
      <p>————<span>买家购买须知</span>————</p>
    </div>
    <div class="xuzhi">
      <p><span>收货时间</span><span>引产品为新鲜水果,请您在12小时收货</span></p>
      <p>
        <span>发货时间</span
        ><span
          >一般情况下，拍下宝贝后，将于24小时内为您安排发出,默认发某某快递</span
        >
      </p>
      <p>
        <span>中差评</span
        ><span
          >对于客服的服务或果品不甚满意的话，请随时与客服反馈我们定会尽心尽力的解决一切问题请勿随意给出差评。</span
        >
      </p>
      <p>
        <span>退换注意</span
        ><span
          >退换注意如您收到的果品出现损耗或缺漏，请您拍下带外箱及外包装的果品照片并发给我们的客服我们将第一时间为您</span
        >
      </p>
      <p>
        <span>配送注意</span
        ><span
          >偏远地区/寒冷地区/较热地区注意:拍下宝贝后请和客服做好沟通工作,以便我们能更好的处理您的包裹。</span
        >
      </p>
    </div>
    <!-- 底部 -->
    <footer id="nav">
      <span><i class="iconfont icongouwuche"></i>购物车</span>
      <span><i class="iconfont iconxinaixin"></i>关注</span>
      <span class="btn" @click="addShop()">加入购物车</span>
      <span @click="buyNow">立即购买</span>
    </footer>
    <!-- 添加成功提示框 -->

    <!-- 模态框 -->
    <div id="myModal">
      <div><img src="img/check2.png" alt="" width="50px" /></div>
      <div>{{ tit }}</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
// 模态框
#myModal {
  width: 240px;
  height: 100px;
  background-color: #cccccccc;
  position: fixed;
  top: 52%;
  left: 20%;
  /* border-right: 15px; */
  border-radius: 22px;
  font-size: 23px;
  justify-content: space-around;
  display: none;
  text-align: center;
  padding-top: 10px;
}
// 顶部
.header {
  background-color: #fff;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  span {
    font-size: 16px;
    line-height: 43px;
    margin-left: -26px;
    overflow: hidden;
    img {
      width: 25px;
      float: left;
      margin: 7px 0 0 10px;
    }
  }
}
// 大图
.pic {
  width: 93%;
  margin: 44px auto 0;
  height: 300px;
  text-align: center;
  padding-bottom: 1px;
  border-bottom: 1px solid #e5e5e5;
  background: #eae5d7;
}
// 价格介绍
.pirce {
  margin-top: 10px;
  text-align: center;
  font-size: 18px;
  color: #ff7e00;
  p:last-child {
    color: #6b2828;
    font-size: 16px;
  }
}
// 活动
.huodong {
  width: 93%;
  margin: 10px auto 0;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  p {
    padding: 7px 10px;
  }
}
.youhui {
  margin-left: 5px;
  color: #757575;
}
.lingqu {
  float: right;
}
.huodong p:last-child {
  border-top: 1px solid #e5e5e5;
  i {
    float: right;
  }
}
// 继续拖动
.tuo {
  text-align: center;
  padding: 13px 0;
  background-color: #eeeeee;
  margin-top: -2px;
  span {
    margin: 0 10px;
  }
}
// 详情
.xiang {
  width: 93%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  margin: 10px auto;
  border-bottom: 1px solid #f4f4f4;
  span {
    min-width: 30px;
    text-align: center;
    border-bottom: 1px solid #000;
  }
}
.pic_1 {
  width: 93%;
  margin: 0 auto;
  text-align: center;
}
.tuo_1 {
  text-align: center;
  padding: 13px 0;
  background-color: #f2b370;
  // margin-top: -2px;
  color: #fff;
  span {
    margin: 0 10px;
  }
}
.xuzhi {
  width: 100%;
  margin: 0px auto 0;
  background-color: #f2b370;
  color: #fffefe;
  p {
    width: 100%;
    // height: 70px;
    font-size: 18px;
    display: flex;
    padding: 5px 10px;
  }
}
.xuzhi p span:first-child {
  padding-left: 10px;
  // line-height: 30px;
  flex: 3;
}
.xuzhi p span:last-child {
  flex: 7;
  font-size: 14px;
}
// 底部
#nav {
  width: 100%;
  position: fixed;
  background-color: #fff;
  height: 45px;
  // padding: 3px 0;
  left: 0;
  bottom: 0;
  display: flex;
  // justify-content: space-around;
  text-align: center;
  font-size: 12px;
  span {
    text-align: center;
  }
}
#nav span:first-child {
  flex: 1.5;

  i {
    display: block;
    font-size: 25px;
    height: 50%;
    line-height: 50%;
    padding-top: 8px;
    margin-bottom: 2px;
  }
}
#nav span:nth-child(2) {
  flex: 1.5;
  border-left: 1px solid #cccccc;
  i {
    display: block;
    height: 50%;
    line-height: 50%;
    padding-top: 10px;
    margin-bottom: 2px;
  }
}
#nav .btn {
  flex: 3.5;
  line-height: 45px;
  color: #fff;
  background-color: #6b2828;
  border: none;
  border-radius: 0;
  font-size: 16px;
}
#nav span:last-child {
  flex: 3.5;
  line-height: 45px;
  color: #fff;
  background-color: #ff7e00;
  font-size: 16px;
}
</style>

<script>
// 引入事件中央总线
import bus from "@/bus.js";
export default {
  data() {
    return {
      path: {
        lujin: "/Home",
      },
      //   nav:bus.$on('',(nav)=>(console.log(nav))),
      tit: "购买成功！",
      buyNow: {
        src: "../../img/jing_1.jpg",
        proName: "南非红心西柚8个装",
        priceOne: "58",
        proPrice: "39",
        num: "99",
        proNum: 1,
      },
    };
  },

  mounted() {
    bus.$off("myHander");
    bus.$on("myHander", (navShop) => {
      this.buyNow = navShop;
    });
    console.log(this.$store.state.username);
    // Vue使用axios跨域请求数据
    // this.$axios.get("htqintp:localhost:3000/data").then((data) => {
    //   console.log(data);
    // });
    // // 自己写后台端口 使用proxy代理
    // this.$axios.get("/api/data").then((data) => {
    //   console.log(data);
    // });
  },
  methods: {
    // 立即购买
    // buyNow(){
    //    localStorage.setItem('buyNow',JSON.stringify(this.local))
    // }
    // 添加购物车
    addShop() {
      var person=JSON.parse(localStorage.getItem('personMsg'));   //获取本地存储的用户地址等信息
      if(person==null){
          this.$router.push({path:'/Login'});
       }else{
         this.$store.state.username=person.name;
         this.$axios
        .post("http://47.114.130.21:3003/Xiangqing", {
          name: this.$store.state.username,
        })
        .then((data) => {
          console.log(data);
          console.log(data.data[0].list);
          var arr = data.data[0].list;
          console.log(arr);
          if (arr == "") {  // 如果数据库为空直接添加数据
            var arr = [];
            arr.push(this.buyNow);
            this.$axios
              .post("http://47.114.130.21:3003/Xiangqingg", {
                name: this.$store.state.username,
                pro: arr,
              })
              .then((data) => {
                // console.log(this.productList);
              });
            $("#myModal").fadeIn(500);
            setTimeout(() => {
              $("#myModal").fadeOut(500);
            }, 2000);
          } else {  // 如果数据库不为空
            for (var i = 0; i < arr.length; i++) {
              if (this.buyNow.proName == arr[i].proName) {
                this.tit = "请勿重复添加商品！";
                $("#myModal").fadeIn(500);
                setTimeout(() => {
                  $("#myModal").fadeOut(500);
                }, 2000);
                break;
              }
              // console.log(arr);
            }
            if (i == arr.length) {  
              arr.push(this.buyNow);
              this.$axios
                .post("http://47.114.130.21:3003/Xiangqingg", {
                  name: this.$store.state.username,
                  pro: arr,
                })
                .then((data) => {
                  // console.log(this.productList);
                });
              $("#myModal").fadeIn(500);
              setTimeout(() => {
                $("#myModal").fadeOut(500);
              }, 2000);
            }
          }
        });
       }



      
    },
  },
};
</script>
 